All Categories :
HTML
Chapter 21
Internet Explorer Extensions
CONTENTS
Not to be outdone by Netscape and others, Microsoft Internet Explorer
adds a number of HTML-type tags and attributes that further enhance
your ability to layout and customize your pages. It's difficult
to say which browser offers support for more off-the-wall extensions-it
basically depends on who's come out with the most recent version.
There's a browser war on, and you can bet that standard HTML features
won't be moving fast enough for Microsoft and Netscape.
In fact, at the time of this writing, Microsoft had just released
an alpha (developers-only) version of Internet Explorer 3.0, which
promises to support Netscape-style frames, the HTML 3.0 <INSERT>
tag, and HTML 3.0 style sheets. All of these have been discussed
in earlier chapters, but it's significant to note that a major
force in the industry has decided to support these tags. (Of course,
I can't make any guarantees concerning the final Internet Explorer
3.0 product.)
| Note |
Using the extensions in this chapter probably warrants a "best viewed in Internet Explorer" or similar line of text on your page. But how can you tell if an extension is Internet Explorer only? You can track changes to Internet Explorer's HTML support, including tags created by Microsoft, at http://www.microsoft.com/ie/author/htmlspec/html_toc.htm on the Web.
|
Internet Explorer (IE) adds a number of extensions to the <BODY>
tag, generally to affect the appearance of the background itself.
IE also adds support for background sounds (sounds that are played
by the browser as the page loads).
The BGPROPERTIES attribute
can be used in conjunction with BACKGROUND
specified by HTML 3.0. In IE-compatible browsers, this forces
the background to work like a "watermark," which Microsoft
defines as a background graphic that doesn't scroll. The only
value for BGPROPERTIES is
"fixed." The following is an example:
<BODY BACKGROUND="PATTERN.GIF"
BGPROPERTIES="fixed">
As always, <BODY> is
a container tag, so you'll need a </BODY>
tag at then end of your HTML markup for this page.
The <BODY> tag can
accept two other attributes in IE-compatible browsers: LEFTMARGIN
and TOPMARGIN. Each of these
accepts a value in pixels, specifying the amount of white space
between the left and top sides of the browser window (respectively)
and your text or graphics. For example:
<BODY LEFTMARGIN="30" TOPMARGIN="30">
If you'd like your page to play a sound as the page loads into
your user's browser, you can add that capability with the <BGSOUND>
tag. You'll generally want to put it near the top of the <BODY>
section of your HTML document, but that's only for your benefit-it'll
load as it's recognized by the browser.
The <BGSOUND> tag is
an empty tag that accepts two attributes: SRC
and LOOP. SRC
is used to specify the sound file that you want played. LOOP
determines how many times you want the sound played, and can have
a number for a value or the word "infinite" for constant
playing. <BGSOUND>
takes the following format:
<BGSOUND SRC="URL"
LOOP="number/infinite">
An example of this might be:
<BGSOUND SRC="intro.au"
LOOP="2">
In IE, the sound file can be a sound sample (.au
or .wav files) or a MIDI
(.mid or .midi)
format sound file. Other browsers, if they support <BGSOUND>,
may vary in their ability to play certain types of sounds.
| Tip |
Be careful with LOOP="infinite". A constantly repeated sound, especially a system sound, might confuse your user into thinking there's something wrong with his or her computer. (Or it may just annoy your user.)
|
IE adds two attributes to Netscape's <FONT>
tag: COLOR and FACE.
Actually, you may remember that you were able to change the overall
text color in Netscape. In IE, you can change the color for a
single word (or even individual letters, if you've got a lot of
time on your hands).
| Note |
Unless everyone in the world has switched to IE by the time you read this, recognize that clever use of color and font faces can communicate something that is lost on other HTML users. When possible, use either the HTML style sheet or standard HTML markup to change font appearance and emphasize text.
|
To change the color of a font in the middle of your document's
text, use the <FONT>
container with the COLOR
attribute, like this:
<FONT COLOR="#rrggbb/color
name">new color text</FONT>
The COLOR attribute can accept
either three two-digit hex numbers to describe a color, or a color
name itself. For example, both of the following result in red
text:
<FONT COLOR="#FF0000">This
is red text</FONT>
<FONT COLOR="Red">This is also red
text</FONT>
The FACE attribute can be
used to change the actual typeface used in the IE browser window.
Because different systems can offer different fonts, this attribute
allows you to offer a list of font names. Each name will be tried
in succession until a matching font name is found. The FACE
attribute takes the following format:
<FONT FACE="name, name2,
name3,...">
Look at the following example:
<FONT FACE="Arial, Helvetica,
Times Roman">
Your browser will attempt to use the font Arial, and then fall
back to Helvetica and Times Roman until it finds a font match
on the user's computer system. If none of the fonts are found,
a default font is used.
Without being too coy here (and letting on that I'm not terribly
fond of these IE tags), I'd like to create an example that not
only makes use of these tags, but overuses them. One of the biggest
problems with these IE tags is that they are so browser-specific
that you can get yourself in trouble. Let's create a page that,
when loaded in your copy of IE, will make you want to immediately
unload it.
| Note |
If you want to download a copy of IE, you can get it from http://www.microsoft.com/ie/ie.htm. There's no UNIX version (just various Windows versions and one for Macs) which is probably a good thing. If you're like me, you'd have a hard time trying to figure out what font names to use in UNIX for the <FONT FACE> tag.
|
To start, create a new HTML document and enter Listing 21.1.
Listing 21.1 ie_ext.html Fonts,
Sounds, and Background with IE Extensions
<BODY BACKGROUND="logo.gif"
BGPROPERTIES="fixed">
<BGSOUND SRC="beep.wav" LOOP="infinite">
<H2><FONT FACE="Script, Times">Welcome <FONT
COLOR="blue">to <FONT
COLOR="green">BigCorp!</H2>
<P> <FONT COLOR="#FF00FF" FACE="Arial,
Helvetica">If you've got Internet
Explorer, then you're probably having the experience of your life.
There's
<FONT COLOR="red">nothing wrong with your system<FONT
COLOR="#FF00FF">,
We've just added a little noise to help make your stay more pleasant!</P>
<HR>
<P> <FONT FACE="Courier, Courier New" COLOR="blue">
Click below if you're
ready to go somewhere else within our site!<BR> <UL>
<LI>Head over to our <A HREF="products.html">Product
pages</A>
<LI>Learn <FONT COLOR="red">a little more
<A HREF="about.html">About
BigCorp</A>
<LI>Need some help? Try <A HREF='support.html">Tech
Support</A>
<LI><FONT FACE="Times, Times Roman">Wanna
buy something?
<A HREF="service.html">Customer Service</A>
is a click away.
</UL>
</P>
</BODY>
Take a look at figure 20.1 for an example screenshot of this listing,
but a graphic can't do it justice. To truly experience this, you'll
need to load it in your own copy of Internet Explorer. Also, change
beep.wav to any other annoying
sound you happen to have lying around and are able to copy to
the same directory as your HTML document.
Figure 21.1 : This page is a poster-child for conservative use of IE HTML extensions.
Internet Explorer fully implements the HTML 3.0 standard for tables
(described in Chapter 15), with some additional
attributes, again targeted to users that would prefer to have
more control over the appearance of the table. I personally like
these extensions a little more than the others we've seen from
IE. Why? Because the table standard is already geared directly
to the graphical browser community. These additions make them
even more attractive, without to much effort. Other browsers will
probably support these extensions quickly.
Most interesting is the BGCOLOR
attribute, which can be used to change the background color of
rows or columns. The BGCOLOR
attribute accepts three two-digit hex numbers or a color name
and works with the <TABLE>,
<TR>, and <TD>
tags (see Listing 21.2).
Listing 21.2 IE Table Extensions
<TABLE BORDER="1" CELLSPACING="2"
CELLPADDING="2">
<TR><TH>JOB</TH><TH>MONDAY</TH><TH>TUESDAY</TH><TH>WEDNESDAY</TH>
<TR BGCOLOR="#000022"><TH>Clean</TH><TD>Mike</TD><TD>Bill</TD><TD>Sue</TD>
<TR><TH>Cook</TH><TD>Sue</TD><TD>Mike</TD><TD>Bill</TD>
<TR BGCOLOR="#000022"><TH>Wash</TH><TD>Bill</TD><TD>Sue</TD><TD>Mike</TD>
</TABLE>
As you can see in figure 21.2, you can do more than just change
the background color of tables for aesthetic reasons. As accountants
and engineers have known for years, it's easier to communicate
information in tables when you're able to shade different rows
to make it clear what data is related to what other data and headers.
Figure 21.2 : Using color in IE tables.
The other attributes, BORDERCOLOR
and BORDERLIGHT, are used
to change the color of the border in IE tables. They must be used
with the BORDER attribute
to the <TABLE> tag
(or the <TR> or <TD>
tag if you want to change border colors in mid-table). Both accept
either three two-digit hex numbers or a color name. The following
is an example:
<TABLE BORDER="3" BORDERCOLOR="blue"
BORDERLIGHT="lightblue">
The BORDERCOLOR value affects
the top portion of IE's 3D style table border. The BORDERLIGHT
value changes the "lower" (shadow) part of IE's border.
Basically, these values just let you toy with the 3D effect on
IE table borders. Listing 21.3 shows another example using the
above line of code.
Listing 21.3 Border Colors with IE Tables
<TABLE BORDER="1" CELLSPACING="2"
CELLPADDING="2" BORDERCOLOR="blue"
BORDERLIGHT="lightblue">
<TR><TH>JOB</TH><TH>MONDAY</TH><TH>TUESDAY</TH><TH>WEDNESDAY</TH>
<TR><TH>Clean</TH><TD>Mike</TD><TD>Bill</TD><TD>Sue</TD>
<TR><TH>Cook</TH><TD>Sue</TD><TD>Mike</TD><TD>Bill</TD>
<TR><TH>Wash</TH><TD>Bill</TD><TD>Sue</TD><TD>Mike</TD>
</TABLE>
Chapter 16 discussed the <INSERT>
tag, designed for adding inline multimedia objects to your Web
pages. IE has it's own version, which will probably be de-emphasized
as <INSERT> becomes
more widely accepted. It is possible, with IE-specific attributes,
to add an inline video clip or VRML world with extensions to the
<IMG> tag.
| Note |
I'd suggest using the <INSERT> tag instead of these extensions to the <IMG> tag as <INSERT> becomes more popular. Check with the W3C, Netscape, and Microsoft IE Web sites to get a feel for whether or not popular browsers are supporting <INSERT>.
|
IE accepts the attribute DYNSRC
along with an URL to indicate the video clip you want displayed
by the user's browser. You can also include a SRC
attribute for <IMG>,
thus allowing it to display a standard graphic file for browsers
that don't support DYNSRC.
These attributes take the following format:
<IMG SRC="graphic URL"
DYNSRC="video URL">
Currently, the video URL
needs to be a .avi video
file. The graphic URL
can be any typically accepted graphic format, like GIF or JPEG.
An example would be the following:
<IMG SRC="earth.gif" DYNSRC="earth.avi">
In addition, <IMG>
will also accept the attribute CONTROLS,
which displays a set of video controls under a video clip, if
present. CONTROLS, then,
requires that the DYNSRC
attribute also be present. For example:
<IMG SRC="moon.gif" DYNSRC="moon.avi"
CONTROLS>
In Internet Explorer, this adds video controls to the inline clip,
as shown in figure 21.3.
Figure 21.3 : An inline .avi file in IE.
Two other attributes for <IMG>
also affect the way your video clip will play-LOOP
and START. LOOP
allows you to choose the number of times that the video will play
once started. START allows
you to decide how it will be started.
LOOP accepts either a number
or the value "infinite." For instance, in the following
example, the video will play three times in a row once it is started:
<IMG SRC="earth.gif" DYNSRC="earth.avi"
LOOP="3">
To start the video clip, you can use the START
attribute. This takes either FILEOPEN
or MOUSEOVER as its value.
FILEOPEN instructs the video
to begin when the page is loaded. MOUSEOVER
starts the video when the user moves the mouse pointer over it.
The following example will start the video clip when the mouse
pointer is moved over it by the user, and play the video three
times in a row:
<IMG SRC="earth.gif" DYNSRC="earth.avi
LOOP="3" START="MOUSEOVER">
Not to be left out of the race, Microsoft's Internet Explorer
adds HTML-like extensions much like Netscape. Also, like Netscape,
many of these tags are designed to enhance designers' control
over the page, or to increase their ability to deal with new multimedia
technology.
With IE, this means more control over font faces, font colors,
background colors, table border colors, and the addition of tags
to support background sounds. Extensions to the <IMG>
tag also allow you to play certain video files "inline"-that
is, without a helper application.
- Which of the following is not an attribute for the <BODY>
tag: BGPROPERTIES, BGSOUND,
LEFTMARGIN, RIGHTMARGIN.
Which of the four is an actual tag?
- What type of sound files can be used as a background sound?
- Aside from a color name, what else can the COLOR
attribute to the <FONT>
tag accept as a value?
- How often can you change the color or the font in an IE document?
- What is the LOOP attribute
used for with background sounds?
- With what HTML table tags can the BGCOLOR
attribute be use?
- What tag will eventually be substituted for the combination
of the <IMG> tag and
the DYNSRC attribute in IE?
- How is it possible to start a IE video clip by pointing the
mouse at it?
- Create a page that plays a background sound three times, while
displaying a background image as a watermark.
- Change the colors in each letter of the word Congratulations
using IE HTML extensions.
- Change the font of each letter in the word Welcome
using IE HTML extensions.
- Using tables HTML tags, create a table that puts squares of
different colors on the page, but without any table lines or borders.
- Using a border, force the border lines to disappear into the
background color of an HTML table.
- Add an AVI video clip to your page, and have it play twice
as the page loads, without showing controls.
